<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Flotr: Mouse Track Example</title>
		<link rel="stylesheet" href="style.css" type="text/css" />

		<script type="text/javascript" src="../flotr/lib/prototype-1.6.0.2.js"></script>
		<script type="text/javascript" src="examples.js"></script>
		
		<!--[if IE]>
			<script type="text/javascript" src="../flotr/lib/excanvas.js"></script>
			<script type="text/javascript" src="../flotr/lib/base64.js"></script>
		<![endif]-->
		<script type="text/javascript" src="../flotr/lib/canvas2image.js"></script>
		<script type="text/javascript" src="../flotr/lib/canvastext.js"></script>
		<script type="text/javascript" src="../flotr/flotr-0.2.0-alpha.js"></script>
	</head>
	<body>
		
		<!-- ad -->
		
		<div id="wrapper">
			<h1></h1>
			<div id="container" style="width:600px;height:300px;"></div>
			<h2>Example</h2>
			<p>This example show three series, there's nothing special about them. The thing that is special,
			that they all have what I call mouse tracking. Flotr observes the 'flotr:mouseover' event, and
			shows a point on the overlay canvas whenever the mouse comes near a datapoint.</p>
			<p>
			You can pass the mouse tracking options as the third argument of <code>Flotr.draw()</code>, or you can pass
			the options per series. Hereby, you can enable or disable mousetracking for certain series. As you can see,
			I disabled mouse tracking for the blue line (which is series d1). 
			</p>
			<p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a> or the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p>
			<h2>The Code</h2>
			<pre id="code-view"><code class="javascript"></code></pre>
			<div id="footer">Copyright &copy; 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div>
		</div>
		
		<!-- ad -->
		
		<script type="text/javascript">
			/**
			 * Wait till dom's finished loading.
			 */
			document.observe('dom:loaded', function(){
				/**
				 * Fill series d1 and d2.
				 */
				var d1 = [];
				var d2 = [];
				var d3 = [];
			    for(var i = 0; i < 20; i += 0.5){
					d1.push([i, 2*i]);
					d2.push([i, i*1.5+1.5*Math.sin(i)]);
			        d3.push([i, 3*Math.cos(i)+10]);
				}
				
				/**
				 * The following configuration disables mouse tracking for series d1,
				 * and configures mousetracking for series d2 and d3.
				 */
				var f = Flotr.draw(
					$('container'), 
					[{data:d1,mouse:{track:false}}, d2, d3 ],
					{mouse:{
						track: true,
						lineColor: 'purple',
						relative: true,
						position: 'ne',
						sensibility: 1, // => The smaller this value, the more precise you've to point
						trackDecimals: 2,
						trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y; }
					}}
				);
			});			
		</script>
		
		<!-- analytics -->
		
	</body>
</html>
